iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览 « 张鑫旭

by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6368 本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。

前端代码效果实时预览的需求实际上是非常常见的，例如jsbin，codepen，runjs之类的网站就是满足此需求的。这些站点可以方便快捷的让我们测试一些前端属性的作用和表现，还可以制作可编辑可分享的在线demo，遇到棘手或者不明白问题的时候，给对方一个这样的在线demo地址是最友好的做法。

当然需求场景还不止这些，比方说我们制作一些工具，例如类似玉兔这样的H5制作工具，就有能够实时预览最终效果的需求。又或者说我们写技术文章的时候，文章里面嵌入的源代码，希望可以直接跑起来。

传统做法是这样子的，会新建一个另外的独立页面，专门用来接收传入的前端代码，通过新开窗口或者嵌入iframe页面的方式达到最终效果，其中可能会用到HTML5 postMessage等通信技术。

然而实际上，对于这个预览效果，如果代码是我们自己控制，而不是全权交给用户编辑的，是没有必要新建一个另外的预览页面，亦或者是在新窗口（新标签页）中浏览的。可以直接在当前页面构建一个文档上下文，实现更加方便快捷的预览。

我们直接看一个例子（如果没有效果，请前往文章原出处体验），如下CSS和HTML代码（纯CSS实现了一个水波荡漾的效果）：

点击代码演示区域右上角或右下角的运行按钮，此时这段代码的效果就干干净净（不受当前页CSS，JS干扰）地在当前页面显示了（点击页面空白区域隐藏）。

点击后页面截图如下：

核心原理： 此效果实现的核心原理是：

使用JavaScript代码表示更加一目了然：

需要注意的是，当我们使用 new Blob() 对我们的字符数据进行转换的时候，一定要指定type为text/html，否则，HTML代码会被自动转移为安全的纯文本显示在元素中。

兼容性 IE浏览器遗憾并不支持src直接是URL对象。

所以此技术只适用于对兼容性没有严格要求的一些项目。

其实很多效果，我们直接在结束当前页面的window上下文预览也没什么，但是有一些效果就不行，例如，预览针对响应式布局的media屏幕宽度查询下的效果，必须是真实的窗体宽度才会触发CSS查询语句的执行，此时，只能在中预览，我们只要把元素宽度设置到我们需要的大小就可以了，例如，需要预览类似如下CSS代码效果：

只要设置元素宽度为480像素就可以了。

以上就是本文内容，希望能对你的项目开发有所帮助。

感谢阅读！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。 本文地址：http://www.zhangxinxu.com/wordpress/?p=6368

（本篇完）